<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<div class="zco-message-container">
		<p v-if="type === 'text' && message.data && !message.data.startsWith('http')" v-html="message.data"></p>
		<FileMessage v-else-if="type === 'link' && message.data.type === 'doc'" :fileType="message.data.suffix" :fileName="message.data.name" />
		<ImageMessage v-else-if="type === 'link' && message.data.type === 'pic'" :imgURL="message.data.url" />
		<VideoMessage v-else-if="type === 'link' && message.data.type === 'video'" :videoURL="message.data.url" :status="message.status" />
		<LinkMessage v-else-if="type === 'text' && message.data && message.data.startsWith('http')" :link="message.data" />
	</div>
</template>

<script>
import FileMessage from './FileMessage.vue';
import ImageMessage from './ImageMessage.vue';
import VideoMessage from './VideoMessage.vue';
import LinkMessage from './LinkMessage.vue';
export default {
	components: { FileMessage, ImageMessage, VideoMessage, LinkMessage },
	props: {
		type: {
			type: String,
			default: () => ''
		},
		message: {}
	}
};
</script>

<style></style>
